require('./Pagecxzjdetail.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import {Control} from 'react-keeper';
import cxzjicon  from './../../../assets/img/诚信住建详细.png';
import redflag  from './../../../assets/img/小红旗.png';


class Cxzjdetail extends React.Component {

  constructor(props) {
    super(props);
  }


  render() {
    return (
      <div>
        <MediaBox type="appmsg">
          <MediaBoxHeader style={{
            height:76
          }}>
            <img src={cxzjicon} style={{
              width:79,
              height:76
            }}/>
          </MediaBoxHeader>
          <MediaBoxBody style={{
            marginLeft:15,
            height:76
          }}>
            <MediaBoxTitle>{this.state.cxzjdetail.projectHeader.name}</MediaBoxTitle>
            <MediaBoxDescription>
              <img src={redflag} style={{
                width:13,
                height:13
              }}/>
              信用等级<label style={{
                color:"red"
            }}>{this.state.cxzjdetail.projectHeader.xinyong}</label><br/>
              <span className="pname">{this.state.cxzjdetail.projectHeader.zaijian}</span>
              <span className="redspan">（在建项目）</span>
            </MediaBoxDescription>
            <MediaBoxDescription>
              <span className="pname">{this.state.cxzjdetail.projectHeader.qita}</span>
            </MediaBoxDescription>
          </MediaBoxBody>
        </MediaBox>

        <Panel>
          <PanelHeader>
            <div className="title-bg"/>
            扣分明细
          </PanelHeader>
          <PanelBody>
            <table width="100%" height="100%" style={{
              marginTop:10
            }}>
              <thead style={{
                fontSize:13,
                fontWeight:400,
                fontFamily: 'Arial Normal Arial',
                backgroundColor:"#CCCCCC",
                color:"#949494"
              }}>
              <tr>
                <th>行为描述</th>
                <th>分值</th>
                <th>起始时间</th>
                <th>有效月</th>
              </tr>
              </thead>
              <tbody style={{
                textAlign:"center"
              }}>
              {
                this.state.cxzjdetail.cxzjjianfenData.map((item,i)=>{
                  return (
                    <tr height={40}>
                      <td width={"48%"} className="borderstyle">{item.xingweimiaoshu}</td>
                      <td width={"13%"} className="borderstyle">{item.fenzhi}</td>
                      <td width={"25%"} className="borderstyle">{item.time}</td>
                      <td width={"12%"} className="borderstyle">{item.youxiaoyue}</td>
                    </tr>
                  )
                })
              }
              </tbody>
            </table>
          </PanelBody>
        </Panel>

        <Panel>
          <PanelHeader>
            <div className="title-bg"/>
            加分明细
          </PanelHeader>
          <PanelBody>
            <table width="100%" height="100%" style={{
              marginTop:10
            }}>
              <thead style={{
                fontSize:13,
                fontWeight:400,
                fontFamily: 'Arial Normal Arial',
                backgroundColor:"#CCCCCC",
                color:"#949494"
              }}>
              <tr>
                <th>行为描述</th>
                <th>分值</th>
                <th>起始时间</th>
                <th>有效月</th>
              </tr>
              </thead>
              <tbody style={{
                textAlign:"center"
              }}>
              {
                this.state.cxzjdetail.cxzjjiafenData.map((item,i)=>{
                  return (
                    <tr height={40}>
                      <td width={"48%"} className="borderstyle">{item.xingweimiaoshu}</td>
                      <td width={"13%"} className="borderstyle">{item.fenzhi}</td>
                      <td width={"25%"} className="borderstyle">{item.time}</td>
                      <td width={"12%"} className="borderstyle">{item.youxiaoyue}</td>
                    </tr>
                  )
                })
              }
              </tbody>
            </table>
          </PanelBody>
        </Panel>
      </div>
    );
  }

  componentWillMount() {
    if(Control.state){
      Actions.setHeader(Control.state.detail);
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.cxzjdetail || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Cxzjdetail, Reflux.connect(Store, 'cxzjdetail'));


export default Cxzjdetail ;
